/*!
 * BottleCMS-UI v1.2.7 (http://ui.bottlecms.com)
 * Copyright 2014-2018 BottleCMS, Inc.
 * Licensed MIT 
 */

/*会话窗口样式*/

.icon-return, .icon-mbubble, .icon-emoticon, .icon-more, .icon-voice, .icon-keyboard, .icon-edit, .icon-image, .icon-video, .icon-file, .icon-history, .icon-gifs, .icon-videotalk, .icon-phone, .icon-style {
    height: 30px;
    width: 30px;
    display: inline-block;
    background: url("../img/dialogue/base.png?2") no-repeat 0px 0px;
    background-size: 60px auto;
}
.on .icon-return, .on .icon-mbubble, .on .icon-emoticon, .on .icon-more, .on .icon-voice, .on .icon-keyboard, .on .icon-edit, .on .icon-image, .icon-return.on, .icon-mbubble.on, .icon-emoticon.on, .icon-more.on, .icon-edit.on, .icon-image.on, .icon-video.on, .icon-file.on, .icon-history.on, .icon-gifs.on, .icon-videotalk.on, .icon-phone.on, .icon-style.on {
    background-position-x: -30px;
}
.icon-return {
    background-position-y: 0px;
}
.icon-mbubble {
    background-position-y: -30px;
}
.icon-emoticon {
    background-position-y: -60px;
}
.icon-more {
    background-position-y: -90px;
}
.icon-edit {
    background-position-y: -120px;
}
.icon-image {
    background-position-y: -150px;
}
.icon-keyboard {
    background-position-y: -180px;
}
.icon-voice {
    background-position-y: -210px;
}
.icon-video{
    background-position-y: -240px;
}
.icon-file{
    background-position-y: -270px;
}
.icon-history{
    background-position-y: -300px;
}
.icon-gifs{
    background-position-y: -330px;
}
.icon-videotalk{
    background-position-y: -360px;
}
.icon-phone{
    background-position-y: -390px;
}
.icon-style{
    background-position-y: -420px;
}

.bcui-dialogue p, .bcui-dialogue ul, .bcui-dialogue li {
    padding: 0;
    margin: 0;
    list-style: none;
}
.bcui-dialogue {
    width: 500px;
    height: 500px;
    position: relative;
    background-color: #F8F8F8;
}


/*顶部*/
.bcui-dialogue .dialogue-head { position:absolute; z-index: 100; top: 0; left: 0; right: 0;height: 45px; line-height: 45px; background-color:#FFF;}
    .bcui-dialogue .dialogue-head .l,
    .bcui-dialogue .dialogue-head .r{ width:45px; height:45px; display:block;cursor:pointer; position:absolute; top:0;}
    .bcui-dialogue .dialogue-head .l { left:0;}
    .bcui-dialogue .dialogue-head .r { right:0px;}
    .bcui-dialogue .dialogue-head .l i, 
    .bcui-dialogue .dialogue-head .r i { position:absolute;top:7px; left:7px; }
    .bcui-dialogue .dialogue-head .tit { margin: 0 50px; color: #555; font-size:18px;}
    .bcui-dialogue .d-head .r .unreadNum { position: absolute;-webkit-animation: twinkling 1s infinite ease-in-out; display: none;text-decoration: none; top: 5px; right: 5px; background:#f6296d;border-radius:8px; padding: 1px 5px; height: 12px; line-height: 12px; font-size:.6em; color: #FFF;}



/*底部工具栏*/
.bcui-dialogue .dialogue-send {
    position: absolute;
    z-index: 100;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
}
.bcui-dialogue .dialogue-speak {
    height:50px;
    overflow: hidden;
    position: relative;
}
.bcui-dialogue .dialogue-speak .talkbox {
    padding:7px 100px 0 10px;
    overflow: hidden;
}
.bcui-dialogue .dialogue-speak .voicebox~.talkbox{
    padding-left: 50px;
}
.bcui-dialogue .dialogue-speak .talkbox textarea {
    padding-left: 5px;
    padding-top: 7px;
    resize: none;
    display: inherit;
    width: 100%;
    height: 36px;
    line-height: 20px;
    background-color: #F0F0F0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    border: none;
    border-radius: 3px;
    font-size: 14px
}
.bcui-dialogue .dialogue-speak .talkbox .provide {
    display: none;
}

.bcui-dialogue .dialogue-speak .voicebox {
    padding-top: 7px;
    position: absolute;
    top: 0;
    left: 0; 
    overflow: hidden;
}
.bcui-dialogue .dialogue-speak .voicebox .d-btn {
    cursor: pointer;
    float: left;
    width: 36px;
    height: 36px;
    background: none;
    padding: 0;
    margin: 0;
    margin-left: 5px;
}
.bcui-dialogue .dialogue-speak .voicebox .d-btn i {
    margin: 3px
}

.bcui-dialogue .dialogue-speak .voicebox .keyboard{
    display: none;
}

.bcui-dialogue .dialogue-speak .voicebox.on .keyboard{
    display: block;
}
.bcui-dialogue .dialogue-speak .voicebox.on .voice{
    display: none;
}

.voicetalkbox {
    display: none;
    padding: 7px 100px 0 50px;
    overflow: hidden;
}

.voicetalkbox .voicebtn{
    width: 100%;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color: #F0F0F0;
    border-radius: 3px;
    font-size: 14px
}


.voicetalkbox .voicetalkpop {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;
    background: rgba(0,0,0,.6);
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
    color: #FFF;
    display: none;
}

.voicetalkbox .voicetalkpop.on {
    display: block;
}


@keyframes voiceico {
    20% {
        background-image: url(../img/dialogue/voice/voice1.svg?2);
    }
    40% {
        background-image: url(../img/dialogue/voice/voice2.svg?2);
    }
    60% {
        background-image: url(../img/dialogue/voice/voice3.svg?2);
    }
    80% {
        background-image: url(../img/dialogue/voice/voice4.svg?2);
    }
    100% {
        background-image: url(../img/dialogue/voice/voice5.svg?2);
    }
}

.voicetalkbox .voicetalkpop .ico {
    width: 60px;
    height: 60px;
    margin: 18px auto;
    margin-bottom: 10px;
    position: relative;
    background-image: url(../img/dialogue/voice/voice.svg?2);
    background-size: cover;
    display: block;
    animation: voiceico 1s linear infinite;
}


.bcui-dialogue .dialogue-speak .btnbox {
    padding-top: 7px;
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    overflow: hidden;
}
.bcui-dialogue .dialogue-speak .btnbox .d-btn {
    cursor: pointer;
    float: left;
    width: 36px;
    height: 36px;
    background: none;
    padding: 0;
    margin: 0;
    margin-right: 5px;
}
.bcui-dialogue .dialogue-speak .btnbox .d-btn i {
    margin: 3px
}
.bcui-dialogue .dialogue-speak .btnbox .sendbtn span {
    background-color: #f6296d;
    color: #FFF;
    font-size: 12px;
    border-radius: 3px;
    height: 30px;
    line-height: 30px;
    width: 40px;
    text-align: center;
    display: inline-block;
    margin-top: 3px;
}
.bcui-dialogue .dialogue-speak .btnbox .js_imagebtn, .bcui-dialogue .dialogue-speak .btnbox .js_sendbtn, .bcui-dialogue .dialogue-tool, .bcui-dialogue .dialogue-emot {
    display: none;
}
.bcui-dialogue .dialogue-tool {
    height: 150px;
    border-top: 1px solid #F0F0F0;
    padding: 20px;
}
.bcui-dialogue .dialogue-tool .item {
    float: left;
    margin-right: 20px;
}
.bcui-dialogue .dialogue-tool .item .icon {
    height: 60px;
    width: 60px;
    overflow: hidden;
    position: relative;
    background-color: #F8F8F8;
    border: 1px solid #F0F0F0;
    border-radius: 6px;
}

.bcui-dialogue .dialogue-tool .item .icon i {
    margin: 14px;
    width: 32px;
    height: 32px;
    font-size: 32px;
    display: block;
    color: #999;
}
.bcui-dialogue .dialogue-tool .item .tit {
    line-height: 20px;
    font-size: 12px;
    color: #666;
    text-align: center;
}
.bcui-dialogue .dialogue-emot {
    min-height: 150px;
    border-top: 1px solid #F0F0F0;
    padding: 10px;
    overflow: hidden;
}
.bcui-dialogue .dialogue-emot li {
    cursor: pointer;
    float: left;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}
.bcui-dialogue .dialogue-emot li img {
    width: 20px;
    vertical-align: middle;
    margin-top: -3px;
}












/*会话列表*/

.bcui-dialogue .dialogue-main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50px;
    overflow: hidden;
    overflow-y: auto;
}

.bcui-dialogue .dialogue-main .chatList {
    margin: 10px 0 70px;
        overflow: hidden;
}

.bcui-dialogue .dialogue-main .chatList .time {
    color: #999;
    font-size: .6em;
    text-align: center;
    font-family: Arial;
    text-shadow: 1px 0 0 #FFF
    width: 100%;
    clear: both;
        overflow: hidden;
}
.bcui-dialogue .dialogue-main .chatList .item {
    position: relative;
    display: block;
    margin-top: 12px;
    overflow: hidden;
    padding-bottom: 2px;
}
.bcui-dialogue .dialogue-main .chatList .uinfo {
    float: left;
    display: block;
    width: 50px;
    position: relative;
    text-align: center;
    line-height: 40px;
    font-size: 12px;
}

.bcui-dialogue .dialogue-main .chatList .item .uinfo img {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    background: url('../img/dialogue/userpic.jpg') no-repeat 0 0;
    background-size: cover;
}

.bcui-dialogue .dialogue-main .chatList .item .dialogbox{
    border-radius: 5px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
    background: #FFF;
    font-size: 15px;
    line-height: 1.5em;
    color: #555;
    max-width: 51%;
    min-height: 20px;
    min-width: 50px;
    position: relative;
    float: left;
}

.bcui-dialogue .dialogue-main .chatList .me .dialogbox {
    background: #F4DDE3;
    border: 1px solid #F4DDE3;
}
.bcui-dialogue .dialogue-main .chatList .item .state {
    line-height: 40px;
    text-align: center;
    width: 50px;
    font-size: 12px;
    float:left;
}



.bcui-dialogue .dialogue-main .chatList .me .uinfo,
.bcui-dialogue .dialogue-main .chatList .me .dialogbox,
.bcui-dialogue .dialogue-main .chatList .me .state{
    float: right;
}



.bcui-dialogue .dialogue-main .chatList .dialogbox:after {
    content: " ";
    display: block;
    width: 8px;
    height: 8px;
    background: #fff;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    top: 15px;
    right: -100px;
}
.bcui-dialogue .dialogue-main .chatList .me .dialogbox:after {
    background: #F4DDE3;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.06);
}
.bcui-dialogue .dialogue-main .chatList .you .dialogbox:after {
    position: absolute;
    top: 15px;
    left: -4px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
}

.bcui-dialogue .dialogue-main .chatList .item.msg {
    display: block;
    width: 90%;
    border-radius: 4px;
    margin: 12px auto 0;
    height: auto;
    line-height: 22px;
    text-align: center;
    background: #dbdbdb;
    color: #fff;
    font-size: 14px
}

.bcui-dialogue .dialogue-main .chatList .item .remind {
    width: 70%;
    margin: 0 auto;
    background: #DBDBDB;
    color: #fff;
    padding: 6px 10px;
    border-radius: 5px;
    line-height: 20px
}





.bcui-dialogue .dialogue-main .chatList .item .talk{
    padding: 10px;
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
}
.bcui-dialogue .dialogue-main .chatList .item .talk img {
    max-width: 100%;
    max-height: 400px;
}
.bcui-dialogue .dialogue-main .chatList .item .talk .emot {
    width: 24px;
    height: 24px;
    margin: 0 2px;
}
.bcui-dialogue .dialogue-main .chatList .item .talk a {
    color: #2786E4;
}






/*图片*/

.bcui-dialogue .dialogue-main .chatList .item.word_type2 .talk {
    padding: 0;
}
.bcui-dialogue .dialogue-main .chatList .item.word_type2 .dialogbox {
    background: none;
    border: none;
    box-shadow: none;
}
.bcui-dialogue .dialogue-main .chatList .item.word_type2 .dialogbox:after {
    display: none;
}

/*声音*/
.bcui-dialogue .dialogue-main .me .voice, 
.bcui-dialogue .dialogue-main .me .voice_gif {
    display: inline-block;
    width: 14px;
    height: 20px;
    background: url(../img/dialogue/talk_voice.png) no-repeat;
    background-size: cover;
    float: right;
}
.bcui-dialogue .dialogue-main .me .voice_gif {
    background: url(../img/dialogue/talk_voice.gif) no-repeat
}
.bcui-dialogue .dialogue-main .audio {
    position: absolute;
    opacity: 0;
    width: 40px;
    top: 5px;
    display:none;
}
.bcui-dialogue .dialogue-main .chatList .you .voice, 
.bcui-dialogue .dialogue-main .chatList .you .voice_gif {
    display: inline-block;
    width: 14px;
    height: 20px;
    background: url(../img/dialogue/talk_voice_2.png) no-repeat;
    background-size: cover;
    float: left;
}
.bcui-dialogue .dialogue-main .chatList .you .voice_gif {
    background: url(../img/dialogue/talk_voice_2.gif) no-repeat
}
.bcui-dialogue .dialogue-main .chatList .me .audio {
    right: 1px;
}
.bcui-dialogue .dialogue-main .chatList .you .audio {
    left: 1px;
}


/*视频*/

.bcui-dialogue .dialogue-main .chatList .item.word_type4 .talk {
    padding: 0;
}
.bcui-dialogue .dialogue-main .chatList .item.word_type4 .dialogbox {
    background: none;
    border: none;
    box-shadow: none;
}
.bcui-dialogue .dialogue-main .chatList .item.word_type4 .dialogbox:after {
    display: none;
}
.bcui-dialogue .dialogue-main .chatList .item.word_type4 .video {
    max-width: 100%;
}

    





/*礼物*/

.bcui-dialogue .dialogue-main .chatList .item.word_type12 .talk {
    padding: 0;
}
.bcui-dialogue .dialogue-main .chatList .item.word_type12 .dialogbox {
    background: none;
    border: none;
    box-shadow: none;
    text-align: center;
    padding: 6px;
    width: 130px;
}
.bcui-dialogue .dialogue-main .chatList .item.word_type12 .dialogbox:after {
    display: none;
}
.bcui-dialogue .dialogue-main .chatList .item.word_type12 .gift_img {
    width: 100px;
    height: 100px;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
}
.bcui-dialogue .dialogue-main .chatList .item.word_type12 .gift_title {
    background: #AAA;
    border-radius: 4px;
    height: 30px;
    line-height: 30px;
    padding: 2px 6px;
    color: #FFF;
    font-size: 12px;
    margin-top: 6px;
}


.bcui-dialogue .dialogue-main .ico-history {
    height: 14px;
    width: 14px;
    display: inline-block;
    margin-right: 2px;
    vertical-align: middle;
    margin-top: -4px;
    background: url("../img/dialogue/history.png") no-repeat;
    background-size: 14px 14px;
}
.bcui-dialogue .dialogue-main .MessageHistory {
    text-align: center;
    padding: 10px;
    font-size: 14px;
    color: #2786E4;
    cursor:pointer;
}







.header {display: none;}

.footer {display: none;}



/* 768 */
@media (min-width :769px) {
    ._shadow { filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000',Direction=0,Strength=20)/*上面有阴影*/
        progid:DXImageTransform.Microsoft.Shadow(color='#000000',Direction=90,Strength=20)/*右边有阴影*/
        progid:DXImageTransform.Microsoft.Shadow(color='#000000',Direction=180,Strength=20)/*下边有阴影*/
        progid:DXImageTransform.Microsoft.Shadow(color='#000000',Direction=270,Strength=20)/*左边有阴影*/;
            -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.2);
            -moz-box-shadow: 0 0 20px rgba(0,0,0,0.2);
            box-shadow: 0 0 20px rgba(0,0,0,0.2);}

    body { background:#fb6c94 url("../img/page_bg.jpg");filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";  
-moz-background-size:100% 100%;  
    background-size:100% 100%;  
background-attachment: fixed;}


    .bcui-dialogue { border-radius: 5px;width:600px; height:560px; float: right; }
    .bcui-dialogue .dialogue-head .l{ display: none; }
    .bcui-dialogue .dialogue-head .tit { margin: 0 20px }

    .bcui-dialogue .dialogue-send .dialogue-speak { height:160px;}
        .bcui-dialogue .dialogue-send .dialogue-speak .voicetalkbox,
        .bcui-dialogue .dialogue-send .dialogue-speak .voicebox { display: none; }
        .bcui-dialogue .dialogue-send .dialogue-speak .talkbox { padding:40px 100px 0 15px; padding-left: 15px; overflow:hidden;}
        .bcui-dialogue .dialogue-send .dialogue-speak .talkbox .talk_area { padding-left: 5px; padding-top: 7px; resize: none; display: inherit;   width: 100%;    height: 100px;line-height: 20px; background-color:#F0F0F0;  box-sizing: border-box; -moz-box-sizing: border-box;    -webkit-box-sizing: border-box; -o-box-sizing: border-box;  -ms-box-sizing: border-box; border:none;    border-radius: 3px; font-size: 14px}
        .bcui-dialogue .dialogue-send .dialogue-speak .talkbox .provide { display: none;}
        .bcui-dialogue .dialogue-send .dialogue-speak .btnbox { z-index: 101; overflow: initial; position: absolute; top:0; left: 0; width: auto; padding-left: 15px; padding-top: 2px;}
        .bcui-dialogue .dialogue-send .dialogue-speak .btnbox .btn{ margin-right: 5px; width:36px; height:36px;}
        .bcui-dialogue .dialogue-send .dialogue-speak .btnbox .btn i{ margin: 3px}
        .bcui-dialogue .dialogue-send .dialogue-speak .btnbox .sendbtn span { background-color:#f6296d; color: #FFF; font-size:18px; border-radius:3px; height:70px; line-height:70px; width:70px;text-align:center;display: inline-block; margin-top: 3px;}
        .bcui-dialogue .dialogue-send .dialogue-speak .btnbox .sendbtn { float:none; width: auto; height: auto; position: absolute; top:50px; right:10px;}
        

        
        .bcui-dialogue .dialogue-send .dialogue-speak .btnbox .js_imagebtn,
        .bcui-dialogue .dialogue-send .dialogue-speak .btnbox .js_sendbtn{ display: inherit !important;}
        .bcui-dialogue .dialogue-send .dialogue-speak .btnbox .js_morebtn{ display: none !important;}
        .bcui-dialogue .dialogue-send .dialogue-tool { display: none !important;}


        .bcui-dialogue .dialogue-send .dialogue-emot { position: absolute; border-radius: 5px; top: -180px; left:5px; width: 400px; height:180px; overflow-y: auto; border:1px solid #ddd; padding: 10px; background: #FFF; }

    
    .bcui-dialogue .dialogue-main { bottom:160px;top:45px;}
    .bcui-dialogue .dialogue-main .chatList li .talk { font-size:14px;}
    .bcui-dialogue .dialogue-main .chatList li .talk img { max-width: 200px; max-height: 400px;}






    .chatlistbox { border-radius: 5px;width:300px; height:560px; margin-left: -150px; margin-top: -280px; top:50%; left:50%; right: auto; bottom: auto;}

    .chat_listdetail {overflow: hidden;border-radius: 5px;width:700px; height:560px; background-color: #FFF; margin:50px auto;}
    .chat_listdetail .chatlistbox { display: inherit; width: 200px; left: 0; top:0; margin: 0; border-radius: 0; background-color: #FFF;  }
    .chat_listdetail .chatlistbox li.item.hover{ background: #F5F5F5; }
    .chat_listdetail .bcui-dialogue { width: 500px; left: auto; right:0;top: 0; margin: 0; border-radius: 0;border-left: 1px solid #EEE; }
    .chat_listdetail .bcui-dialogue .d-head .l,
    .chat_listdetail .bcui-dialogue .d-head .r{ display: none; }
    .chat_listdetail .chatlistbox .c-chatlist li .picbox { float:left; width:40px; height: 40px;}
    .chat_listdetail .chatlistbox .c-chatlist li .picbox img { width:40px; height: 40px; border-radius:100%;}
    .chat_listdetail .chatlistbox .c-chatlist li .uinfo { margin-left: 5px; float:left; }
    .chat_listdetail .chatlistbox .c-chatlist li .uinfo .nickname { line-height: 22px; font-size:14px; color: #333;}
    .chat_listdetail .chatlistbox .c-chatlist li .uinfo .online { font-size:10px; color: #999;}
}
